<script lang="ts" setup>
import { all, del, save } from "@/services/user";
import type { User, UserList } from "@/types/user";
import { message, type FormInstance } from "ant-design-vue";
import type { Rule } from "ant-design-vue/es/form";
import { onMounted, ref } from "vue";

const columns = [
  {
    title: "用户名",
    dataIndex: "loginName",
  },
  {
    title: "昵称",
    dataIndex: "name",
  },
  {
    title: "操作",
    key: "action",
  },
];
const userList = ref<UserList>([]);
const loading = ref(false);
const loadList = async () => {
  loading.value = true;
  try {
    const res = await all();
    userList.value = res.content;
  } finally {
    loading.value = false;
  }
};
const text = ref("");
const open = ref(false);
const formState = ref<User>({});
const formRef = ref<FormInstance | null>(null);
const rules: Record<string, Rule[]> = {
  loginName: [{ required: true, message: "用户名不允许为空", trigger: "change" }],
  name: [{ required: true, message: "昵称不允许为空", trigger: "change" }],
  password: [{ required: true, message: "密码不允许为空", trigger: "change" }],
};
const disabled = ref(false);

// 打开编辑框，回显数据
const showEditModal = (user: User) => {
  text.value = "编辑";
  disabled.value = true;
  formState.value = Object.assign({}, user);
  open.value = true;
};

// 打开新增框
const showAddModal = () => {
  text.value = "新增";
  disabled.value = false;
  formState.value = {};
  open.value = true;
};

const handleEditOrAddOk = async () => {
  // 规则校验
  await formRef.value?.validateFields();
  // 发请求
  open.value = false;
  await save(formState.value);
  message.success("success");

  // 请求成功重新加载列表
  loadList();
};

const handleEditOrAddCancel = () => {
  open.value = false;
  // 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
  formRef.value?.resetFields();
};

const handleDel = async (id: number) => {
  await del(id);
  message.success("success");
  // 请求成功重新加载列表
  loadList();
};

onMounted(() => {
  loadList();
});
</script>
<template>
  <a-layout>
    <a-layout-content
      :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      <a-space style="margin-bottom: 20px">
        <a-button type="primary" @click="showAddModal">新增</a-button>
      </a-space>

      <a-table
        :columns="columns"
        :data-source="userList"
        rowKey="id"
        :loading="loading"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <a-button type="primary" @click="showEditModal(record)">编辑</a-button>
              <a-button type="primary" danger>
                <a-popconfirm
                  title="确定删除吗?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="handleDel(record.id)"
                >
                  <a href="#">删除</a>
                </a-popconfirm></a-button
              >
            </a-space>
          </template>
        </template>
      </a-table>

      <a-modal v-model:open="open" :title="text" @cancel="handleEditOrAddCancel">
        <a-form
          ref="formRef"
          v-if="formState"
          :model="formState"
          :rules="rules"
          name="basic"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 20 }"
          autocomplete="off"
        >
          <a-form-item label="用户名" name="loginName">
            <a-input v-model:value="formState.loginName" :disabled="disabled" />
          </a-form-item>
          <a-form-item label="昵称" name="name">
            <a-input v-model:value="formState.name" />
          </a-form-item>
          <a-form-item label="密码" name="password" v-if="!disabled">
            <a-input v-model:value="formState.password" />
          </a-form-item>
        </a-form>
        <template #footer>
          <a-button @click="handleEditOrAddCancel">取消</a-button>
          <a-button type="primary" @click="handleEditOrAddOk"> 提交 </a-button>
        </template>
      </a-modal>
    </a-layout-content>
  </a-layout>
</template>
<style scoped></style>
